<template>
  <div>
    <van-nav-bar title="登录" left-arrow @click-left="$router.back()" />
    <p class="title">优点达资讯</p>
    <van-form @submit="login">
      <!-- <van-icon name="manager" /> -->
      <van-field
        left-icon="manager"
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="请输入手机号"
        :rules="rules.mobile"
      />
      <van-field
        left-icon="bag"
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="rules.code"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
    <van-row>
      <van-col offset="12" span="12"><a href="#">没有账号,立即注册</a></van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: '',
      rules: {
        // 手机号的校验规则
        mobile: [
          {
            required: true,
            message: '手机号不能为空'
          },
          {
            // 手机号格式
            pattern:
              /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '手机号码格式不正确'
          }
        ],
        // 验证码
        code: [
          {
            required: true,
            message: '验证码不能为空'
          },
          {
            // 手机号格式
            pattern: /^\d{6}$/,
            message: '验证码格式不正确'
          }
        ]
      }
    }
  },
  methods: {
    login(values) {
      try {
        console.log('submit', values)
        this.$toast.success('登陆成功')
        this.$router.push('/')
      } catch {
        this.$toast.success('登陆失败')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  color: #1989fa;
  font-size: 30px;
  margin-top: 30px;
  margin-bottom: 30px;
}
</style>
